<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>阿里百秀登录</title>
  <link rel="stylesheet" href="../assets/css/base.css">
  <script src="../assets/js/vue.js"></script>
  <style>
    @font-face {
      font-family: 'icomoon';
      src:
        url('../assets/vendors/icomoon/fonts/icomoon.ttf?wm7ib1') format('truetype'),
        url('../assets/vendors/icomoon/fonts/icomoon.woff?wm7ib1') format('woff'),
        url('../assets/vendors/icomoon/fonts/icomoon.svg?wm7ib1#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
      font-display: block;
    }

    body {
      background-color: #2F4254;
    }

    section {
      width: 20%;
      margin: 240px auto 0px;
      background-color: #ffffff;
      padding: 50px 20px 20px;
      border-radius: 3px;
      position: relative;
      font-family: "icomoon"
    }

    section::before {
      width: 100px;
      height: 100px;
      display: block;
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -60%);
      border-radius: 50%;
      border: 1px solid #999999;
      background-color: #ffffff;
      cursor: pointer;
    }

    section::after {
      content: "\eabd";
      position: absolute;
      top: 0px;
      left: 50%;
      transform: translate(-50%, -70%);
      color: red;
      font-size: 4.3rem;
      cursor: pointer;
    }

    section>input {
      width: 100%;
      height: 40px;
      line-height: 40px;
      margin: 10px 0;
      border: none;
      border: 1px solid #cccccc;
      border-radius: 4px;
      font-size: 16px;
      padding-left: 5px;
    }

    section>input:last-of-type {
      cursor: pointer;
      letter-spacing: 8px;
      font-size: 1.1rem;
      background-color: #314454;
      border: none;
      color: #ffffff;
    }

    section>input:last-of-type:active {
      box-shadow: 0px 0px 10px 1px #888888;
    }

    .tips {
      width: 20%;
      height: 30px;
      background-color: #ffffff;
      text-align: center;
      line-height: 30px;
      color: red;
      position: fixed;
      top: 30px;
      left: 50%;
      border-radius: 4px;
      transform: translateX(-50%);
    }

    .v-enter,
    .v-leave-to {
      opacity: 0;
    }

    .v-enter-active,
    .v-leave-active {
      transition: all 0.6s ease;
    }
  </style>
</head>

<body>
  <section id="section">
    <transition>
      <div class="tips" v-show="msg">{{msg}}</div>
    </transition>

    <label for="userEmail">邮箱地址:</label>
    <input type="email" autofocus autocomplete="off" placeholder="请输入邮箱地址" v-model="email">

    <label for="password">密码:</label>
    <input type="text" autocomplete="off" placeholder="请输入密码" v-model="password">
    <input type="button" value="登录" @click="handle">
  </section>
</body>
<script>
  "use strict";
  const ii = new Vue({
    el: "#section",
    data() {
      return {
        email: "",
        password: "",
        msg: ""
      }
    },
    methods: {
      moveClear() {
        let msgId = window.setTimeout(() => {
          this.msg = "";
          window.clearTimeout(msgId);
        }, 1 * 1000);
      },
      handle() {
        if (this.email.trim().length == 0 || this.password.trim().length == 0) {
          this.msg = `请输入邮箱或密码`;
          this.moveClear();
          return false;
        };

        // 发送请求
        fetch("http://localhost:9090/admin/", {
          method: "post",
          body: window.JSON.stringify({
            email: this.email,
            password: this.password
          }),
          headers: {
            "Content-Type": "application/json"
          }
        }).then(data => {
          return data.json();
        }).catch(err => {
          console.error(err);
        }).then(res => {
          if (res.msg == "true") {
            window.location.href = "/admin/index.html";
          } else {
            this.msg = res.msg;
            this.moveClear();
          };
        });
        // 将输入的文本框清空
        this.email = "";
        this.password = "";
      }
    }
  });
</script>

</html>